<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 在作移动端页面适配时，一般我们不希望用户自己缩放页面大小，加入user-scalable=no。 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>smilevue</title>
    <!-- iphone 5 1rem = 16px   heml font-size=16px -->
    
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->

    <script>
      // 移动端用Rem + JavaScript完成屏幕适配的方法
      // 得到手机屏幕的宽度
      let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
      //得到html的Dom元素
      let htmlDom = document.getElementsByTagName('html')[0];
      // 当页面宽度大于750px时，我们就把页面的宽度设置成750像素。
      if(htmlWidth>750){htmlWidth=750}
      //设置根元素字体大小
      htmlDom.style.fontSize= htmlWidth/20 + 'px';
    </script>
  </body>
</html>
